@extends('admin.common.app')
@section('cont')
    <section class="Hui-article-box">
        <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页
            <span class="c-gray en">&gt;</span>管理员
            <span class="c-gray en">&gt;</span>添加节点
            <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px"
               href="javascript:location.replace(location.href);" title="刷新">
                <i class="Hui-iconfont">&#xe68f;</i>
            </a>
        </nav>
        <article class="cl pd-20">
            @include('admin.common.msg')
            <form action="{{ route('admin.node.store') }}" method="post" class="form form-horizontal"
                  @submit.prevent="dopost">
                @csrf
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3">是否顶节：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <span class="select-box">
				            <select class="select" name="pid" size="1" @change="changePid">
					            <option value="0">==顶级==</option>
                                @foreach($data as $item)
                                    <option value="{{$item->id}}">{{$item->name}}</option>
                                @endforeach
				            </select>
                        </span>
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>节点名称：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" v-model.lazy="info.name" placeholder="请输入节点名称" name="name"
                               autocomplete="off">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3">路由别名：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" v-model="info.route_name" placeholder="请输入路由别名"
                               id="truename" name="route_name" autocomplete="off">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否菜单：</label>
                    <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                        <div class="radio-box">
                            <input type="radio" value="0" v-model="info.is_menu">
                            <label for="sex-1">否</label>
                        </div>
                        <div class="radio-box">
                            <input type="radio" value="1" v-model="info.is_menu">
                            <label for="sex-2">是</label>
                        </div>
                    </div>
                </div>
                <div class="row cl">
                    <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                        <input class="btn btn-primary radius" type="submit" value="添加节点">
                    </div>
                </div>
            </form>
        </article>
    </section>
@endsection
@section('js')
    <script src="/admin/js/vue.js"></script>
    <script>
        new Vue({
            el: '.pd-20',
            data: {
                info: {
                    _token: "{{csrf_token()}}",
                    pid: '0',
                    name: '',
                    route_name: '',
                    is_menu: 0
                }
            },
            methods: {
                async dopost(evt) {
                    let url = evt.target.action;
                    let {status, msg} = await $.post(url, this.info);
                    if (status === 0) {
                        layer.msg(msg, {icon: 1, time: 2000});
                        location.href = "{{ route('admin.node.index') }}";
                    } else {
                        layer.msg(msg, {icon: 2, time: 1000});
                    }
                },
                // 下拉
                changePid(evt) {
                    // 下拉的值 evt.target select 的dom对象
                    this.info.pid = evt.target.value || 0;
                }
            },
            mounted() {

            },
        })
    </script>
@endsection
